<template>
    <div v-if="data.length > 0 && selectName" class="mb10 tag-wrapper">
        <!-- #307CED -->
        <Tag
            color="#3a3ad1"
            v-for="(sel,index) in data"
            :key="sel[selectKey]"
            type="border"
            closable
            @on-close="closeItem(sel,index)"
            ><span
                v-if="selectType === 'html'"
                class="text-ellipsis html-ellipsis"
                v-html="getSlectShow(sel)"
            ></span>
            <span v-else class="text-ellipsis">{{ getSlectShow(sel) }}</span></Tag
        >
        <Tag
            color="error"
            @click.native="clearSelect()"
            style="background: #ed4014;cursor:pointer!important;"
            >清空</Tag
        >
    </div>
</template>
<script>
 export default {
    name:'Selection',
    props:{
        data:{
            type:Array,
            default:() => []
        },
        selectKey:{
            type: String,
            default: 'id'
        },
        selectName:{
            type: [String, Function],
            default: 'name'
        },
        selectType:{
            type: String,
            default: 'txt'
        }
    },
    methods:{
        closeItem(sel){
            this.$emit('closeItem',sel)
        },
        clearSelect(){
            this.$emit('clearSelect')
        },
        getSlectShow(sel) {
            return typeof this.selectName === 'function'
                ? this.selectName(sel)
                : sel[this.selectName];
        },
    }
 }
</script>
<style scoped>
    .tag-wrapper{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }
    .tag-wrapper /deep/ .ivu-tag{
        display: flex;
        align-items: center;
        padding:0;
        max-width: 400px;
    }
    .tag-wrapper /deep/ .text-ellipsis{
        display: block;
    }
    .tag-wrapper /deep/ .ivu-tag-text{
        padding: 0 8px;
        overflow: hidden;
    }
    .tag-wrapper /deep/ .ivu-icon-ios-close{
        position:static;
        margin-left: 0px!important;
        width: 22px;
        flex: none;
        text-align: center;
    }
</style>